<template>
  <h1>{{ arr }}</h1>

  <el-card shadow="hover" class="card_Home">
    <el-button type="primary" @click="onOpenWbsocket">前往测试webSocket</el-button>
    <el-button type="success" @click="onOpenTable">表格Hook调用</el-button>
    <el-button type="info" @click="onOpenMouse">鼠标移动监听位置</el-button>
    <el-button type="warning" @click="onOpenSelect">select全选反选</el-button>
    <el-button type="danger" @click="onOpenDiong">弹窗框</el-button>
    <el-button type="danger" @click="onDynamicRows">动态添加行</el-button>
  </el-card>
  <el-card shadow="hover" class="card_Home">
    <el-button type="primary" text="primary" @click="onOpenSealedTable">table表格封装</el-button>
    <el-button type="primary" text="primary" @click="onOpenValidate">V 3表单验证</el-button>
    <el-button type="primary" text="primary" @click="onOpenEditor">wangEditor富文本编辑器</el-button>
    <el-button type="primary" text="primary" @click="onOpenEchart">大屏可视化</el-button>
    <el-button type="primary" text="primary" @click="onOpenTableDeful">封装表格</el-button>
  </el-card>
<!--  写一个退出按钮放在右下角-->
  <el-button class="loginOut" type="primary" @click="onLoginout">退出登录</el-button>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {Session} from '../../utils/storage';
const router = useRouter()


const arr = ref("曾经沧海难为水",)
/** 前往websocket*/
const onOpenWbsocket = () => {
  router.push({path: '/websocket'})
}
const onOpenTable = () => {
  router.push({path: '/tables'})
}
const onOpenMouse = () => {
  router.push({path: '/mouse'})
}
const onOpenSelect = () => {
  router.push({path: '/select'})
}

const onOpenSealedTable =()=>{
  router.push({path: '/sealedTable'})
}

const onOpenDiong = ()=>{
  router.push({path: '/dialog'})
}
const onLoginout =()=>{
  Session.clear()
  router.push({path: '/login'})
}
const onDynamicRows = ()=>{
  router.push({path: '/dynamicRows'})
}
const onOpenValidate = ()=>{
  router.push({path: '/validate'})
}
const onOpenEditor = ()=>{
  router.push({path: '/editor'})
}
const onOpenEchart = ()=>{
  router.push({path: '/echart'})
}
const onOpenTableDeful = ()=>{
  router.push({path: '/tabledeful'})
}
</script>

<style scoped lang="scss">
h1 {
  text-align: center;
  width: 100%;
  text-shadow: 1px 1px rgba(197, 223, 248, 0.8), 2px 2px rgba(197, 223, 248, 0.8), 3px 3px rgba(197, 223, 248, 0.8), 4px 4px rgba(197, 223, 248, 0.8), 5px 5px rgba(197, 223, 248, 0.8), 6px 6px rgba(197, 223, 248, 0.8);
  letter-spacing: 9px;
  margin-bottom: 25px;
}

.card_Home {
  margin-top: 10px;
}
//给loginOut 按钮放在页面放在页面右下角
.loginOut {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 10px;
  z-index: 999;
}
</style>
